<template>
  <div class="waiting-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">列表区域设置</el-divider>
      </div>

      <el-form-item label="展示行数">
        <el-input-number
            :min="2"
            :max="5"
            size="small"
            :disabled="true"
            @change="handleTotal"
            class="hide-spin-button"
            v-model="optionsInfo.showRowNums"
        />
      </el-form-item>

      <el-form-item label="内容高度">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.contentHeight"
        />
      </el-form-item>
    </div>
    <!--改:队列设置-->
    <div class="list-title-setting" v-if="false">
      <div class="title-info">
        <el-divider content-position="left">列表头部设置</el-divider>
      </div>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.headerBackgroundColor"/>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.headerFontColor"/>
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
      <el-form-item label="科室名称">
        <el-input
            :min="0"
            type="input"
            size="small"
            :autosize="{ minRows: 2, maxRows: 4}"
            class="hide-spin-button"
            v-model="optionsInfo.deptTitle"
        />
      </el-form-item>
      <el-form-item label="正在就诊">
        <el-input
            :min="0"
            type="input"
            size="small"
            :autosize="{ minRows: 2, maxRows: 4}"
            class="hide-spin-button"
            v-model="optionsInfo.visitTitle"
        />
      </el-form-item>
      <el-form-item label="等候就诊">
        <el-input
            :min="0"
            type="input"
            size="small"
            :autosize="{ minRows: 2, maxRows: 4}"
            class="hide-spin-button"
            v-model="optionsInfo.waitTitle"
        />
      </el-form-item>
    </div>

     <!--候诊设置-->
    <div class="list-scroll-setting" v-if="false">
      <div class="title-info">
        <el-divider content-position="left">列表设置</el-divider>
      </div>
      <el-form-item label="开启滚动" v-if="false">
        <el-switch v-model="optionsInfo.openScroll"/>
      </el-form-item>
      <el-form-item label="滚动速度" v-if="false">
        <el-input-number
            v-model="optionsInfo.scrollStep"
            :min="0"
            :max="4"
            :disabled="!(optionsInfo.openScroll)"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="是否切屏" v-if="false">
        <el-switch v-model="optionsInfo.switchScreen"></el-switch>
      </el-form-item>
      <el-form-item label="切屏时间(s)">
        <el-input-number
            :min="10"
            :step="1"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.switchTime"
            :disabled="!(optionsInfo.switchScreen)"
        />
      </el-form-item>
    </div>

    <!--等待就诊滚动设置-->
    <div class="wait-visit-setting">
      <div class="title-info">
        <el-divider content-position="left">等待就诊</el-divider>
      </div>
      <el-form-item label="开启滚动">
        <el-switch v-model="optionsInfo.waitScrollState"/>
      </el-form-item>

      <el-form-item label="开启滚动数量">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.waitScrollNumber"
        />
      </el-form-item>
      <el-form-item label="滚动速度">
        <el-input-number
            :min="1"
            :max="5"
            size="small"
            class="hide-spin-button"
            :disabled="!(optionsInfo.waitScrollState)"
            v-model="optionsInfo.waitScrollStep"
        />
      </el-form-item>
    </div>

    <!-- 改:记录 -->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生:呼叫记录</el-divider>
      </div>
      <el-form-item label="在线医生的呼叫记录" class="replenish-shown">
          <!--在线医生呼叫记录 全量的呼叫记录  -->
        <el-switch v-model="optionsInfo['recordsLine']"/>
        <el-tooltip
            class="item"
            effect="dark"
            content="开关开启查询在线医生呼叫记录。开关关闭查询全量的呼叫记录"
            placement="bottom"
        >
          <el-button>
            <i class="el-icon-warning"></i>
          </el-button>
        </el-tooltip>
      </el-form-item>
    </div>

  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import Draggable from "vuedraggable"
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "sceneWaitingCallRecordsConfig-editor",

  componentName: "sceneWaitingCallRecordsConfig-editor",

  components: {
    roomNameKeyEditor,
    Draggable
  },

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      constantDic: constantDic,
      optionsInfo: Object(),
      predefineColors: types['predefineColors'],
    }
  },

  computed: {
    isDisabled() {
      return function (val) {
        let arr = ['deptName', 'treatmentRoomName', 'workerName'];
        return arr.includes(val);
      }
    }
  },

  methods: {
    handleDragEnd() {

    },

    handleTotal(val){
      let {multiple} = (this.optionsInfo)
      this.optionModel.rowNumber = multiple*val;
      console.log(this.optionModel)
    }
  },


  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        let key = val.config
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.col-info {
  :deep(.el-form-item__content) {
    margin-left: 1px !important;
    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: 100%;
    }

    .el-checkbox {
      width: calc(100% - 32px);
    }
  }

}
.replenish-shown {
  display: flex;
  flex-direction: column;

  :deep(label) {
    width: 100% !important;
  }

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    .el-input-number {
      flex-shrink: 1;
      width: 150px;
    }

    .el-button {
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }
  }
}
</style>